<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>支付中心</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../css/index.css" />
		<link rel="stylesheet" type="text/css" href="../css/style.css" />
		<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/vant.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/ajax.js" type="text/javascript" charset="utf-8"></script>
		<script src="html5plus://ready"></script>
		<script src="../js/back.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			body{
				background-color: #E8E8E8;
			}
			#spqd{
				margin-top: 5px;
				border-radius:10px ;
				background-color: white;
				padding: 10px;				
			}
			#shdz{
				margin-top: 5px;
				border-radius:10px ;
				background-color: white;
				padding: 10px;				
			}
			#name-input{
				padding-top: 5px;								
				border: 0px;
			}
			#shdz-input{
				margin-left: 15px;				
			}
			#zffz{
				padding: 10px;
				background-color: white;
				margin-top: 10px;
				border-radius: 10px;				
			}
			#zfimg{
				padding: 10px;
				background-color: white;
				margin-top: -1px;
				border-radius: 10px;
			}
			#zfb{
				width: 30px;
				height: 30px;
			}
			#dz-img{
				margin-top: 15px;
				width: 40px;
				height: 40px;
			}
			
		</style>
	</head>
	<body>
		<div id="app">
			<header>
				<van-row style="background-color: red;">
					<van-col span="3"  style="color: white;margin-left: 15px;">
						<span @click="goBack"><返回</span>
					</van-col>
					<van-col span="18" style="color: white;">结算</van-col>					
				</van-row>			
			</header>
			
			<section>
				<van-row id="spqd"><!-- 商品清单开始 -->
					
						<div id="name-input">
							<van-card
								v-bind:price="price" 
								v-bind:title="name"							 
								v-bind:thumb="GoodsImageUrl"
								v-bind:num="count"	
								centered=true
								v-bind:id="id">
								<img v-bind:src="GoodsImageUrl" 
								onerror="javascript:this.src='../img/product_default.jpg';onerror=null; "  
								slot="thumb">
								<div slot="footer">
									<van-button size="mini" @click="jia" type="danger" round>减1</van-button>
									<van-button size="mini" disabled type="info">{{count}}</van-button>
									<van-button size="mini" @click="jian" round type="primary">加1</van-button>
								 </div>								
							</van-card>
						</div>
												
				</van-row><!-- 商品清单结束 -->
				
				<van-row id="shdz"><!-- 收货地址开始 -->
					<van-col span="4" >
						<img src="../img/u=1961861013,358764824&fm=26&gp=0.jpg" id="dz-img">
					</van-col>	
					<van-col span="20" >
						<div style="margin-bottom: 5px;">
							<van-row>
								<van-col span="6">
									<b>{{shname}}</b>
								</van-col>
								<van-col span="6" style="margin-top: 1px;">
									<b>{{phone}}</b>
								</van-col>								
							</van-row>
						</div>
						<div>
							<b style="color: red;">{{shdz}}</b>
						</div>
					</van-col>										
				</van-row><!-- 收货地址结束 -->							
				
				
				<van-row id="zffz">
					<van-col span="24" >支付方式</van-col>					
				</van-row>
				
				<div id="zfimg">
					<van-row><!-- 支付方式开始 -->
						<van-col span="3" ><img src="../img/pay_icon_zfb.png" id="zfb"></van-col>
						<van-col span="5" style="margin-top: 6px;">支付宝</van-col>
						<van-col span="2" offset="14" style="margin-top: 6px;">
							<van-checkbox v-model="checked"></van-checkbox>
						</van-col>					
					</van-row><!-- 支付方式结束 -->
					
					<van-row><!-- 支付方式开始 -->					
						<van-col span="3" ><img src="../img/pay_icon_wx.png" id="zfb"></van-col>
						<van-col span="5" style="margin-top: 6px;">微信支付</van-col>
						<van-col span="2" offset="14" style="margin-top: 6px;">
							<van-checkbox v-model="wx" checked-color="#07c160"></van-checkbox>
						</van-col>
					</van-row><!-- 支付方式结束 -->
					
				</div>							
			</section>
			
			<footer>
				<van-submit-bar
				  v-bind:price="ZongJia*100"
				  button-text="提交订单"
				  @submit="onSubmit"
				>
				 
				</van-submit-bar>
			</footer>
			
		</div>
		<script type="text/javascript">
			var vm=new Vue({
				el:"#app",
				data:{ 	
					orderId:"",	//订单id
					count:"1",   //商品数量
					shdz:"",		//收货地址
					shname:"",		//商品名称
					phone:"",		//手机号
					checked:true,		//支付宝					
					wx:false,		//微信			
					price:localStorage.getItem("goumaiprice"),		//商品卡片价格					
					name:localStorage.getItem("spname"),		//商品卡片名称
					list:[],
					GoodsImageUrl:"",		//商品卡片图片
					id:localStorage.getItem("payid"),		//商品卡片id
					
				},				
				mounted(){
					ajax({					
						url: "http://dsapi.ysd3g.com/api/IndexGoodsData",
						data: {
							p:1
						},
						dataType: "jsonp",
						success: function(res) {
							console.log(res)							
						}
					}),
					ajax({
						url: "http://dsapi.ysd3g.com/api/MyDefaultAddress",
						data:{
							key:localStorage.getItem("keys")
						},
						dataType: "jsonp",
						success:function(res){
							if(res.Error==false){								
								vm.shdz=res.address;
								vm.shname=res.name;
								vm.phone=res.tel;
							}else{
								plus.webview.currentWebview().reload();
							}							
						}
					})					
				},
				computed:{
					ZongJia:function(){
						var money=0;
						money+=this.count*this.price;							
						return money;
					}
				},
				methods:{					
					jia(){
						if(vm.count==1){
							vm.$toast("不能再减了哦");
						}else{
							vm.count--
						}	
					},
					jian(){
						vm.count++				
					},
					goBack:function(){
						var arr=plus.webview.currentWebview();
						plus.webview.close(arr,"slide-out-right")
					},
					onSubmit(){						
						if(vm.shname==null){
							vm.$dialog.alert({
							  message: '没有收货地址快递小哥哥是找不到你的哟~，点我去增加一个'
							}).then(() => {
								plus.webview.create("../presoanl/newshipping.html","add");
								plus.webview.show("add","slide-in-left");
							});
						}else{							
							//开始支付过程
							var _this=this;
							var shoppingCartJsonStr = [];   //定义数组
							shoppingCartJsonStr = [{
								goodsId: localStorage.getItem("payid"),    //传id
								buyCount: _this.count			//传数量
							}]
						
							var toast=_this.$toast({
								duration: 0,       // 持续展示 toast
								forbidClick: true, // 禁用背景点击
								loadingType: 'spinner',
								message: '生成订单中'
							})
							
							ajax({    //生成订单开始
								url: "http://dsapi.ysd3g.com/API/GeneratingOrder",
								dataType: "jsonp",
								data: {
									key:localStorage.getItem("keys"),   //得到key
									shoppingCartJsonStr: JSON.stringify(shoppingCartJsonStr)   //得到上面数组
								},
								success(res) {
									if(res.Error) {
										_this.$toast.fail(res.Msg);
									} else {
										_this.$toast.success("订单生成成功");	//提示
										console.log(res.OrderId);
										_this.orderId = res.OrderId;		//得到订单
										console.log(_this.orderId);
										localStorage.setItem(res.orderId, _this.addressId);			//保存订单						
										ajax({			//开始支付
											url:"http://dsapi.ysd3g.com/api/OrderPay",
											type:"post",
											dataType:"JSONP",
											data:{
												key:localStorage.getItem("keys"), 	//得到key
												oId:_this.orderId,			//得到上面的订单id
												payType:"1",		//默认支付宝
												addressIdx:_this.addressId,		//收获地址
												money:_this.count*_this.price		,//得到支付总价												
											},
											success:function(res){
												console.log(res);
												if(res.Error){
													_this.$toast.fail(res.Msg);													
												}
												else{													
													var payment = "";
													plus.payment.getChannels(function(s) {
													plus.payment.request(s[0], res.strJson, function() {
													vm.$toast.success("支付操作成功！");
													localStorage.setItem("spshuliang",vm.count);
													plus.webview.create("paysuccess.html","success");
													plus.webview.show("success","slide-in-right")
													localStorage.removeItem(orderId);
													
													}, function(e) {
															console.log(e);				//点击取消
															_this.$toast.fail(e.message);
															plus.webview.currentWebview().reload();		//点击取消后刷新一下当前页面
													})
													}, function(e) {
														_this.$toast.fail(e.message);								
													})
												}
											}
										});
									}
								}
							});//生成订单结束				
						}
					}
				}
			})
		</script>
		
	</body>
</html>
